<div class="water-main-container">
  <nz-card style="margin: 20px" nzTitle="水费统计" [nzExtra]="extraTemplate">
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="4">
        <nz-statistic [nzValue]="'37.66亿m³'" [nzTitle]="'总用水量'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-statistic [nzValue]="'13633万元'" [nzTitle]="'应缴水费'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-statistic [nzValue]="'311792 万元'" [nzTitle]="'实缴水费'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-statistic [nzValue]="'86.5%'" [nzTitle]="'缴费进度'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-statistic [nzValue]="'90.0%'" [nzTitle]="'商品水率'"></nz-statistic>
      </nz-col>

    </nz-row>
  </nz-card>
  <ng-template #extraTemplate>
    日期：
    <nz-date-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
  </ng-template>


  <nz-card style="margin: 20px" nzTitle="缴费详情">
    <nz-table
      nzBordered
      [nzShowPagination]="false"
      nzSize="middle"
      [nzData]="tableData">
      <thead>
      <tr>
        <th>管理处</th>
        <th>用水量</th>
        <th>应缴水费</th>
        <th>实缴水费</th>
        <th width="600">缴费进度</th>
        <th>商品水率</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of tableData">
        <td>{{ data.a }}</td>
        <td>{{ data.b }}亿m³</td>
        <td>{{ data.c }}万元</td>
        <td>{{ data.d }}万元</td>
        <td style="padding:0 20px">
          <ng-container *ngIf="data.e>=80">
            <nz-progress class="type1" [nzPercent]="data.e"></nz-progress>
          </ng-container>
          <ng-container *ngIf="data.e>=60 && data.e<80">
            <nz-progress class="type2" [nzPercent]="data.e"></nz-progress>
          </ng-container>
          <ng-container *ngIf="data.e<60">
            <nz-progress class="type3" [nzPercent]="data.e"></nz-progress>
          </ng-container>

        </td>
        <td>{{ data.f !== '' ? data.f + '%' : '----' }}</td>
      </tr>
      </tbody>
    </nz-table>
  </nz-card>
</div>
